<script setup>
// 引用 api'
import { ref, reactive, computed, watch } from 'vue'

// 初始数据（存储在浏览器）
const innerTodos = JSON.parse(localStorage.getItem('todosData'))
  ? reactive(JSON.parse(localStorage.getItem('todosData')))
  : reactive([])

// 当前的过滤状态
const filteStatus = ref('all')

// 筛选的数据（计算属性)
const todos = computed(() => {
  if (filteStatus.value === 'all') {
    return innerTodos
  } else if (filteStatus.value === 'noCompleted') {
    return innerTodos.filter(item => !item.isCheck)
  } else if (filteStatus.value === 'completed') {
    return innerTodos.filter(item => item.isCheck)
  }
})

// 提示信息
const tips = ref(false)

// 侦听是否数据是否改变并保存数据
watch(
  () => ({ ...innerTodos }),
  () => {
    // 保存数据
    localStorage.setItem('todosData', JSON.stringify(innerTodos))
  },
  { deep: true },
)

// 输入框内容
const content = ref('')

// 输入框内容长度限制数量
const contentLength = 50

// 侦听输入框
watch(content, () => {
  // 输入框内容长度限制
  if (content.value.length > contentLength) {
    tips.value = true
  } else {
    tips.value = false
  }
})

// 当前数组长度
const todosSize = computed(() => {
  return todos.value.length
})

// 添加函数
function submit() {
  // 输入框内容长度限制
  if (content.value.trim() === '' || content.value.length > contentLength) {
    return
  }

  // 添加待办
  innerTodos.push({
    id: innerTodos.length !== 0 ? innerTodos[innerTodos.length - 1].id + 1 : 1,
    todo: content.value,
    isCheck: false,
  })

  // 清空内容
  content.value = ''
}

// 全部
function all() {
  // 修改显示状态
  filteStatus.value = "all"
}

// 未完成
function noCompleted() {
  // 修改显示状态
  filteStatus.value = "noCompleted"
}

// 已完成
function completed() {
  // 修改显示状态
  filteStatus.value = "completed"
}

// 删除待办
function del(id) {
  // 获取待办索引
  const index = innerTodos.findIndex((item) => item.id === id)
  // 删除待办
  innerTodos.splice(index, 1)
}

</script>

<template>
  <!-- 新增待办 -->
  <div class="box">
    <div class="nav">
      <h3>待办事项</h3>
      <input type="text" placeholder="请输入您的待办事项，回车后可添加哟" @keyup.enter="submit" v-model="content" />
      <p v-show="tips">最多输入50个字符哟！！！</p>
    </div>

    <!-- 待办列表 -->
    <div class="main">
      <ul v-if="todos.length > 0">
        <li v-for="todo in todos">
          <div class="liContent">
            <div>
              <input type="checkbox" v-model="todo.isCheck" />
              <p :style="{
                textDecoration: todo.isCheck ? 'line-through' : 'none',
                color: todo.isCheck ? '#ccc' : '#333',
              }">
                {{ todo.todo }}
              </p>
            </div>
            <div @click="del(todo.id)" class="del">
              <span>删除</span>
            </div>
          </div>
        </li>
      </ul>

      <!-- 无待办的情况 -->
      <ul v-else id="noContentUl">
        <div id="noContentDiv">暂无待办</div>
      </ul>
    </div>

    <!-- 待办筛选 -->
    <div class="total">
      <div class="left">总计：{{ todosSize }}</div>
      <div class="right">
        <span @click="all" :class="{ statusActive: filteStatus === 'all' }">全部</span>
        <span @click="noCompleted" :class="{ statusActive: filteStatus === 'noCompleted' }">未完成</span>
        <span @click="completed" :class="{ statusActive: filteStatus === 'completed' }">已完成</span>
      </div>
    </div>
  </div>
</template>

<style>
* {
  padding: 0;
  margin: 0;
}

#app {
  background-color: #ccc;
  display: flex;
  align-content: center;
  justify-content: center;
  height: 100vh;
}

.statusActive {
  color: #db2525;
}

#noContentUl {
  display: flex;
  justify-content: center;
  align-content: center;
  height: 100%;
}

#noContentDiv {
  align-content: center;
  font-size: 16px;
}

.box {
  color: #333;
  display: flex;
  flex-direction: column;
  background-color: inherit;
  width: 1000px;
  margin: 2rem auto;
}

.nav p {
  padding: 15px 0 0 0;
}

.nav {
  text-align: center;
}

.nav input {
  width: 100%;
  border-radius: 5px;
  outline: none;
  padding: 10px;
  border: 0;
}

.main {
  flex: 1;
  background-color: #fff;
  margin: 15px auto;
  width: 1020px;
  border-radius: 5px;
  overflow-y: auto;
}

.main li:hover .del {
  display: block;
}

.main li .del {
  display: none;
}

.main .liContent {
  display: flex;
  justify-content: space-between;
  align-content: center;
  padding: 10px;
}

.main input,
.main p {
  display: inline-block;
}

.main p {
  text-indent: 5px;
}

.total {
  display: flex;
  background-color: #fff;
  margin: 0px auto;
  width: 100%;
  padding: 10px;
  border-radius: 5px;
  justify-content: space-between;
}

.total span {
  margin: 10px;
}

li {
  list-style: none;
}

.main li {
  border-bottom: 1px #ccc dashed;
}

h3 {
  color: #333;
  text-align: center;
  display: block;
  padding: 0 0 15px 0;
}
</style>
